<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
  </head>
  <body>
    <div id="app">
        <ul>
            <li>孙悟空</li>
            <li>猪悟能</li>
            <li>沙悟净</li>
        </ul>
        
        <ul>
         <!-- 遍历数组 item代表所有的元素  persons代表被遍历的属性-->
            <li v-for="(person,index) in persons" :key="person.id">
                {{ person }}  {{ index }}
            </li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const vm = new Vue({
        data:{
            //人名
            persons:[
                {id:1, name:"孙悟空",age:500},
                {id:2, name:"猪悟能",age:300},
                {id:3, name:"沙悟净",age:100},
                {id:4, name:"白龙马",age:50},
                {id:5, name:"唐三藏",age:30},
            ]
        }
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
